<template>
  <div class="div-container">
    <div class="div-com">
      <div class="div-com-title">组件</div>
      <div class="div-com-list flex-wrap">
        <div
          class="div-com-list-item"
          v-for="(item, index) in DesList"
          :key="index"
          @click="chooseItem(DesList[index])"
        >
          <div class="div-com-list-item-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="div-opr">
      <component :is="selectItem?.t_type" :data="selectItem?.data"></component>
    </div>
    <div class="div-pro">
      <div>属性编辑</div>
      <t-divider></t-divider>
      <t-space direction="vertical">
        <div>组件名: {{ selectItem?.title }}</div>
        <div>
          属性联动:
          <t-switch :value="checked" @change="onChange"></t-switch>
        </div>
        <div>
          图片地址:
          <t-input type="url" placeholder="请输入图片地址" v-model.trim="selectItem.data.url">{{
            selectItem.data.url
          }}</t-input>
          <t-upload
            :default-files="['上传图片']"
            :multiple="false"
            :max="1"
            :size-limit="{ size: 3000000, unit: 'B' }"
            accept="image/png/jpg"
            action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
            @validate="onValidate"
          >
          </t-upload>
        </div>
        <div v-show="checked">
          宽度:
          <t-input type="number" placeholder="请输入组件宽度" v-model.trim="selectItem.data.width">{{
            selectItem.data.width
          }}</t-input>
        </div>
        <div v-show="checked">
          高度:
          <t-input type="number" placeholder="请输入高度" v-model.trim="selectItem.data.height">{{
            selectItem.data.height
          }}</t-input>
        </div>
      </t-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { markRaw, onMounted, reactive, ref } from 'vue';
import ListCard from './components/ListCard.vue';
import { CodeComponentType, EImageType } from './editorModel';
import EImage from './components/EImage.vue';

const data = reactive({
  baseTitle: '基础组件',
  inputTitle: '输入组件',
  desTitle: '描述组件',
});

onMounted(() => {
  selectItem.value = BaseList[0];
});
const checked = ref(true);
const onChange = (val: any) => {
  checked.value = val;
};
const onValidate = (context: any) => {
  if (context.type === 'FILE_OVER_SIZE_LIMIT') {
    alert('文件大小超出上限');
  }
};
const selectItem = ref<CodeComponentType>({
  title: 'button',
  t_type: 't-button',
  image: 'https://tdesign.gtimg.com/site/doc/doc-tooltip.png',
  data: {
    url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
    width: 120,
    height: 120,
  } as EImageType,
});
const chooseItem = (item: CodeComponentType) => {
  selectItem.value = item;
  console.log(item.data);
};

const BaseList: CodeComponentType[] = [
  {
    title: 'button',
    t_type: 't-button',
    image: 'https://tdesign.gtimg.com/site/doc/doc-button.png',
    data: {
      url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
      width: 120,
      height: 120,
    } as EImageType,
  },
];
const InputList: CodeComponentType[] = [
  {
    title: 'input',
    t_type: 't-input',
    image: 'https://tdesign.gtimg.com/site/doc/doc-input.png',
    data: {
      url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
      width: 120,
      height: 120,
    } as EImageType,
  },
];
const DesList: CodeComponentType[] = [
  {
    title: '输入框',
    t_type: 't-input',
    data: {
      url: '',
      width: 220,
      height: 120,
    } as EImageType,
  },
  {
    title: '按钮',
    t_type: 't-button',
    data: {
      url: '',
      width: 220,
      height: 120,
    } as EImageType,
  },
  {
    title: '图片',
    t_type: markRaw(EImage),
    image: 'https://img2.baidu.com/it/u=2426725940,2447151535&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625',
    data: {
      url: 'https://img2.baidu.com/it/u=2426725940,2447151535&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625',
      width: 120,
      height: 120,
    } as EImageType,
  },
];
</script>

<style lang="less" scoped>
.div-container {
  height: 100%;
  background-color: #ffffff;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.div-com {
  height: 100%;
  background-color: #ffffff;
  width: 300px;

  &-title {
    padding: 16px;
    padding-bottom: 0px;
  }

  &-list {
    &-item {
      width: 100px;
      cursor: pointer;
      background: #e6e6e6;
      padding: 5px;
      margin-right: 5px;
      border-radius: 5px;
      padding-top: 10px;
      margin-bottom: 10px;
      &-img {
        width: 45px;
        height: 45px;
        text-align: center;
      }
      &-title {
        text-align: center;
      }
    }
  }
}
.div-opr {
  height: 100%;
  background-color: #e6e6e6;
  padding: 16px;

  flex: 1;
}
.div-pro {
  height: 100%;
  width: 300px;
  background-color: #ffffff;
  padding: 16px;
}

.t-divider {
  margin: 0;
  margin-top: 8px;
}
</style>
